"use strict";
window.onload = () => {
    // 初始化
    class Wujie extends HTMLElement {
        constructor() {
            super();
            // 创建一个shadowDom,样式隔离,不会影响外层的样式
            let dom = this.attachShadow({ mode: 'open' });
            let template = document.querySelector('#wujie');
            // template不能够直接使用，需要深度克隆一份
            dom.appendChild(template.content.cloneNode(true));
            // 打印传入的参数
            console.log(this.getAttr('url'), this.getAttr('age'));
        }
        // 接受参数
        getAttr(attr) {
            return this.getAttribute(attr);
        }
        //生命周期自动触发有东西插入
        connectedCallback() {
            console.log('类似于vue 的mounted');
        }
        //生命周期卸载
        disconnectedCallback() {
            console.log('类似于vue 的destory');
        }
        //跟watch类似
        attributeChangedCallback(name, oldVal, newVal) {
            console.log('跟vue 的watch 类似 有属性发生变化自动触发');
        }
    }
    // 挂载 第一个参数是起名字（不可以驼峰式），第二个参数是类的名
    // 类似于Vue组件，原生js写的组件
    window.customElements.define('wu-jie', Wujie);
};
